import React from 'react'
import _ from "lodash"
import {GlobalStore} from "../../defaultRoutes";

class ScrollList extends React.Component {


    onScroll = () => {
        const end = this.props.endCondition
        // const end = this.props.topic.myZans.end
        if (end) {
            return
        }
        // const top = e.target.scrollTop
        // const hei = e.target.scrollHeight
        const listCtn = this.listCtn
        const top = listCtn.scrollTop
        const hei = listCtn.scrollHeight
        const cHei = document.documentElement.clientHeight
        const endHeight = hei - top - cHei + this.props.gap
        if (endHeight < this.props.endHeight) {
            this.props.scrollCallback()
        }
    }

    onScrollThrottled = _.debounce(this.onScroll, 100)

    render() {
        return <div
            className='topic-list-ctn'
            style={this.props.ctnStyle}
            onScroll={this.onScrollThrottled}
            ref={el => this.listCtn = el}
        >
            {this.props.children}
        </div>
    }

}



export default ScrollList
